@import "base.scss";
@import "mixin.scss";

.SY-content {
    //SY-firstPage
    .SY-firstPage {
        width: 100%;
        height: 89 * $fontSize10 + 6;
        overflow: hidden;
        color: $colorfff;
        background:url("../img/index/banner_bg.jpg") no-repeat center;
        background-size: cover;
        @include boxShadow(0 $fontSize12 / 3 $fontSize10 + 1 rgba(0,0,0,.4));
        z-index:5;
        .mainTitle {
            top: 30 * $fontSize10;
            left: 50%;
            margin-left: - 29 * $fontSize10;
            font-size: 7 * $fontSize10;
            line-height: $lineHeight - 0.3;
        }
        .secTitle {
            top: 41 * $fontSize10 + 5;
            left: 50%;
            font-size: 4 * $fontSize10;
            margin-left: - 24 * $fontSize10;
        }
        .btns {
            top: 52 * $fontSize10;
            left: 50%;
            margin-left: - (26 * $fontSize10 + 5);
        }
        .openPage {
            width: 25 * $fontSize10 + 1;
            height: 7 * $fontSize10 + 1;
            line-height: 7 * $fontSize10 + 1;
            font-size: $fontSize20 + 6;
            color:$colorfff;
            margin-right: $fontSize20;
            @include borderRadius($fontSize20);
            background: url("../img/index/kaitong_an_dj.png") no-repeat center center;
            &:hover {
                @include boxShadow(0 $fontSize16 / 2 $fontSize18 $fontSize10 / 10 rgba(8,101,165,.6));
            }
        }
        .ToSquare {
            width: 25 * $fontSize10 + 1;
            height: 7 * $fontSize10 - 3;
            line-height: 7 * $fontSize10 - 3;
            font-size: $fontSize20 + 6;
            @include borderRadius($fontSize20);
            @include border($fontSize10 / 5,solid,$colorfff);
            @include link-colors($colorfff,#5d3bc6);
            &:hover {
                border-color: #5d3bc6;
            }
        }
    }
    //SY-secondPage
    .SY-secondPage {
        width: 100%;
        height: 59 * $fontSize10 + 2;
        overflow: hidden;
        color: $colorfff;
        background:url("../img/index/youyi_bg.jpg") no-repeat center;
        background-size: cover;
        @include boxShadow(0 $fontSize18 / 2 $fontSize18 + 1 rgba(29,29,29,.16));
        .textBox {
            width: 100 * $fontSize10;
            height: 30 * $fontSize10 + 2;
            margin:16 * $fontSize10 + 8 auto 12 * $fontSize10 + 4;
            background: rgba(0,0,0,.35);
            .fl {
                left: 14 * $fontSize10 + 2;
                top: 8 * $fontSize10 + 4;
            }
            .fr {
                right: 14 * $fontSize10 + 2;
                top: 8 * $fontSize10 + 4;
            }
            .title {
                font-size: $fontSize20 + 6;
                margin-bottom: 3 * $fontSize10;
            }
            .text {
                max-width: 23 * $fontSize10;
                font-size: $fontSize14;
                color: #fffefe;
                line-height: $lineHeight + 0.3;
            }
        }
    }
    //SY-thirdPage
    .SY-thirdPage {
        width: 100%;
        height: 89 * $fontSize10 + 4;
        overflow: hidden;
        background:url("../img/index/shenye_bg.png") no-repeat center;
        background-size: cover;
        .box {
            position: relative;
            width: 100%;
            height: 50 * $fontSize10;
            .box-con {
                position: absolute;
                width: 88%;
                height: 100%;
                top: 0 ;
                left:6%;
                li {
                    position: absolute;
                    width: 32 * $fontSize10;
                    height: 18 * $fontSize10 + 8;
                    left: 66 * $fontSize10;
                    top: 6.6 $fontSize10;
                    overflow: hidden;
                    z-index: 10;
                    background-color: #f9f9f9;
                    @include boxShadow(0 $fontSize12 / 3 2 * $fontSize12 $fontSize12 / 3 rgba(29, 29, 29, 0.1));
                    -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom,from(transparent),color-stop(0.4, transparent),to(rgba(0,0,0,0.2)));
                    &.cover > span {
                        background: rgba(0,0,0,.1);
                    }
                    > span {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        left: 0;
                        top: 0;
                        cursor: pointer;
                    }
                }
                .workerImg {
                    width: 65%;
                    height: 100%;
                    .pic {
                        width: 100%;
                        height: 100%;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: cover;
                    }
                }
                .workerMsg {
                    width: 35%;
                    height: 100%;
                    .workerPic {
                        padding: 10% 10% 5%;
                        width:35%;
                        img {
                            width: 100%;
                            height: 100%;
                            @include border($fontSize10 / 5,solid,rgba(0,0,0,.3));
                        }
                    }
                    .workerDetail {
                        padding: 0 10%;
                        .nickName {
                            font-size: $fontSize14;
                            color: $color000;
                        }
                        .describe {
                            font-size: $fontSize12;
                            color: $color000;
                            margin:5% 0 6%;
                        }
                        .text {
                            font-size: $fontSize12;
                            color: #676767;
                            line-height: $lineHeight;
                            height: 12em;
                            display: -webkit-box;
	                        -webkit-box-orient: vertical;
                        	-webkit-line-clamp:8;
                        	overflow: hidden;
                        }
                        .checkbtn {
                            font-size: $fontSize12;
                            color: #15a4fe;
                            margin-top: 15%;
                        }
                    }
                }
            }
            .prev,.next {
                position: absolute;
                width: 32%;
                height: 73%;
                display: block;
                top: 14%;
                z-index: 99;
                cursor: pointer;
            }
            .prev {
                left: 0;
            }
            .next {
                right: 0;
            }
            ul {
                width: 100%;
                height: 100%;
            }
        }
    }
    //SY-fourthPage
    .SY-fourthPage {
        width: 100%;
        height: 29 * $fontSize10 + 4;
        overflow: hidden;
        background: #21272b;
        .title {
            font-size: 3 * $fontSize10;
            color: $colorfff;
            margin:6 * $fontSize10 + 8 auto 4 * $fontSize10;
        }
        .progressBox {
            .text {
                font-size: $fontSize16;
                color: $colorea;
                width: 77 * $fontSize10 + 2;
                margin:0 auto;
                .broadband {
                    margin-right: $fontSize20;
                }
            }
            .blue {
                color: #11bfff;
            }
            .orange {
                color: #f68119;
            }
            .green {
                color: #11e0cf;
            }
            .progress {
                width: 77 * $fontSize10 + 2;
                margin:$fontSize10 auto;
                height: 3 * $fontSize10 + 4;
                @include borderRadius($fontSize10 + 5);
                overflow:hidden;
                > div {
                    top: 0;
                    left: 0;
                    height: 3 * $fontSize10 + 4;
                    @include borderRadius($fontSize10 + 5 0 0 $fontSize10 + 5);
                }
                .worker {
                    width: 80%;
                    background: #11bfff;
                    z-index: 9;
                }
                .broadband {
                    width: 90%;
                    background: #11e0cf;
                    z-index: 8;
                }
                .cost {
                    width: 100%;
                    background: #f68119;
                    z-index: 6;
                    @include borderRadius($fontSize10 + 5);
                }
            }
        }
    }
    //SY-fifthPage
    .SY-fifthPage {
        width: 100%;
        height: 98 * $fontSize10 + 2;
        overflow: hidden;
        background:url("../img/index/shenghuo_bg.png") no-repeat center;
        background-size: cover;
        .list {
        	padding:0 20 * $fontSize10;
            .item {
            	width: 20 * $fontSize10;
            	height: 30 * $fontSize10;
            	margin-right: 9 * $fontSize10 + 6;
            	margin-bottom: 5 * $fontSize10 + 8;
            	overflow: hidden;
            	background: $colorfff;
                @include boxShadow(0 $fontSize12 / 2 $fontSize10 + 5 0 rgba(0,0,0,.1));
                &:nth-child(3n) {
                    margin-right: 0;
                }
                &:hover {
                    @include boxShadow(0 $fontSize12 / 2 $fontSize10 + 5 0 rgba(0,0,0,.3));
                }
                .title {
                    height:11 * $fontSize10 + 4;
                    font-size:$fontSize18;
                    background: #0a7edf;
                    color: $colorfff;
                    font-weight: 700;
                    p {
                        padding:3 * $fontSize10 2 * $fontSize10 + 5;
                        line-height: $lineHeight;
                    }
                }
                .text {
                    padding:3 * $fontSize10 2 * $fontSize10 + 3 0;
                    font-size: $fontSize14;
                    color: #676767;
                    line-height: $lineHeight;
                }
            }
        }
    }
    .SY-fifthPage .titleBox,.SY-thirdPage .titleBox {
	    width:41 * $fontSize10;
	    margin:9 * $fontSize10 auto 5.6 * $fontSize10;
    }
    .SY-fifthPage .titleBox .lines,.SY-thirdPage .titleBox .lines {
    	width: 9 * $fontSize10 + 4;
    }
    .SY-fifthPage .titleBox .lines span,.SY-thirdPage .titleBox .lines span {
    	height: $fontSize10 / 5;
    	background: $color000;
    }
    .SY-fifthPage .titleBox .lines .num1,.SY-thirdPage .titleBox .lines .num1 {
    	width: 9 * $fontSize10 + 4;
    }
    .SY-fifthPage .titleBox .lines .num2,.SY-thirdPage .titleBox .lines .num2 {
    	width: 5 * $fontSize10 + 6;
    }
    .SY-fifthPage .titleBox .title,.SY-thirdPage .titleBox .title {
    	margin:$fontSize20 0;
    	font-size:3 * $fontSize10;
    	color: #7b7b7b;
    }
    .SY-fifthPage .titleBox .title span,.SY-thirdPage .titleBox .title span {
    	color: $color000;
    	margin-left: $fontSize10;
    }
    .borderRight {
        @include borderRadius(0 5 * $fontSize10 + 6 0 5 * $fontSize10 + 6);
    }
    .borderLeft {
        @include borderRadius(5 * $fontSize10 + 6 0 5 * $fontSize10 + 6 0);
    }
    //SY-sixthPage
    .SY-sixthPage {
        width: 100%;
        height: 20 * $fontSize10;
        background: #ededed;
        .textBox {
            margin:7 * $fontSize10 + 8 0 7 * $fontSize10 + 2 20 * $fontSize10;
            .line {
                width: $fontSize12 / 3;
                height: 5 * $fontSize10;
                margin-right: $fontSize10;
                background: #6b4cec;
                vertical-align: top;
            }
            .text {
                .num1 {
                    font-size: $fontSize16;
                    color: #757575;
                    margin-bottom: $fontSize12;
                }
                .num2 {
                    font-size: 2 * $fontSize10 + 2;
                    color: $color000;
                }
            }
        }
        .openPage a {
            width: 21 * $fontSize10;
            height: 5 * $fontSize10;
            line-height: 5 * $fontSize10;
            margin:7 * $fontSize10 + 4 20 * $fontSize10 7 * $fontSize10 + 6 0;
            font-size: $fontSize20;
            color: #fffefe;
            @include borderRadius($fontSize16);
            background: url("../img/index/dibu_an.png") no-repeat center center;
            &:hover {
                @include boxShadow(0 $fontSize10 / 2 3 * $fontSize10 $fontSize10 / 10 rgba(250,127,67,0.35));
            }
        }
    }
}
